<template>
  <!-- <div v-loading="loading" :element-loading-svg="svg" :style="style" class="flex items-center justify-center cursor-pointer overflow-hidden">
    <img :src="src" :style="style" />
  </div> -->
  <div :element-loading-svg="svg" :style="style" class="flex items-center justify-center cursor-pointer overflow-hidden">
    <img :src="src" :style="style" />
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { useDownloader } from '@/hooks/web/useDownloader'
  import VueTypes from 'vue-types'

  const props = defineProps({
    width: VueTypes.string.def('50px'),
    filepath: VueTypes.string
  })

  const style = ref({
    width: props.width,
    height: props.width
  })

  const { getFile } = useDownloader()
  const loading = ref(false)
  const src = ref<string|ArrayBuffer>()

  const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `

  onMounted(async () => {
    const avatar = 'avatar.jpeg'
    if(props.filepath) {
      try {
        loading.value = true
        const file = await getFile(props.filepath, avatar)
        var reader = new FileReader()
        reader.onload = (e) => {
          src.value = e.target.result
          loading.value = false
        }
        reader.readAsDataURL(file)
      } catch (error) {
        src.value = `/${avatar}`
      }
    } else {
      src.value = `/${avatar}`
    }
  })
  </script>